<template>
  <el-dialog class="public-dialog" title="ASIN销量趋势" width="620" :modelValue="modelValue" @close="handleClose" draggable align-center :close-on-click-modal="false">
    <div class="flex items-center">
      时间
      <el-date-picker
        v-model="value1"
        type="monthrange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        valueFormat="YYYY-MM-DD HH:mm:ss"
        class="mx-[8px]" style="width:120px"
      />

      <el-button type="primary" @click="query"> 查询 </el-button>
    </div>
    <div class="flex flex-wrap p-[8px]">
      <VText v-for="item in formColumn" :key="item.key" :title="item.label" :value="formData[item.key] || '-'" class="w-[50%]" />
    </div>
    <div class="echart">
      <div id="echart-view"></div>
    </div>
    <template #footer>
      <el-button type="primary" :loading="loading" @click="handleClose(false)"> 确认 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus"
const modelValue = ref(false)
import * as echarts from "echarts"
const data = reactive({
  formData: {},
  loading: false,
  value1: [],
})
const { title, formData, value1, loading } = toRefs(data)

const handleClose = () => {
  modelValue.value = false
  // form?.value.resetForm()
}
const open = (params = {}) => {
  modelValue.value = true
  setTimeout(() => {
    initEcharts()
  }, 1000)
}
const query = () => {
  initEcharts()
}
// const form = ref()
const formColumn = [
  { label: "国家", key: "xxxxx" },
  { label: "SKU", key: "xxxxx" },
  { label: "ASIN", key: "xxxxx" },
  { label: "自定义SKU", key: "xxxxx" },
  { label: "总销量", key: "xxxxx" },
]
const initEcharts = async () => {
  var chartDom = document.getElementById("echart-view")
  console.log(chartDom)
  var myChart = echarts.init(chartDom)
  console.log(myChart)
  var option

  option = {
    tooltip: {
      trigger: "axis", 
      // axisPointer: {
      //   type: "shadow",
      // },
    },

    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line",
        smooth: true,
      },
    ],
  }
  console.log(12)
  option && myChart.setOption(option)
}

defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 300px;
  // background: pink;
  #echart-view {
    height: 100%;
  }
}
</style>
